@config.main(" Proteomics Info") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <div class="body-box">
        <div class="page-box">

            @config.subTitle(" Proteomics Info")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">


                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> Species:</label>
                        <div class="col-sm-7">
                            <select id="species" class="form-control" style="width: 100%" ></select>

                        </div>
                    </div>

                    @components.button("form")
                </form>

                <div id="result" class="result">
                    <hr/>



                    <h4 id="title" ></h4>
                    <hr/>
                        <div style="width: 100%;">

                            <div id="toolbar" style="margin-bottom: 10px">
                                <button class="btn my-btn" onclick="Plot()" style="padding: 5px 40px" disabled id="plotBtn">
                                    Plot
                                </button>
                            </div>

                            <table class="table table-hover" id="table" data-pagination="true"
                            data-page-list="[10,25,50,100]">

                            </table>
                        </div>

                        <div style="width: 100%; " id="hBox" >
                            <div id="heatmap"  ></div>
                            <div id="line"  ></div>

                        </div>



                </div>
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/bootstrap3-typeahead.min.js")" type="text/javascript"></script>

    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/data.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/heatmap.js")" type ="text/javascript"></script>
    <script>

            let plotData = {}
            let speciesName = ""

            $(function () {
                $.post("@routes.ProteomicsController.getProteinName()", (data) => {
                    $("#species").select2({data: data})
                })

            })


            function Search() {
                speciesName = $("#species").val()

                let index = MyTable.prototype.runningIcon();
                $.ajax({
                    url: "/alfalfa/proteomics/getByName?name=" + $("#species").val(),
                    type: "post",

                    success: (data) => {
                        $("#table").bootstrapTable("destroy");
                        let columns = [{
                            field: "state",
                            checkbox: true,
                            rowspan: 1
                        }]
                        $.each(data.header, (i, v) => {
                            columns.push({
                                field: `${i}`,
                                title: v,
                                sortable: true,
                                searchType: "text"
                            })

                        })
                        $("#table").bootstrapTable({
                            data: data.table,
                            maintainMetaData: true,
                            advancedSortable: true,
                            columns: columns,
                            onCheck:function (r,$e){
                                disPlotBtn()
                            },
                            onUncheck:function (){
                                disPlotBtn()
                            },
                            onCheckAll:function (){
                                disPlotBtn()
                            },
                            onUncheckAll:function (){
                                disPlotBtn()
                            }
                        });



                        $("#title").html($("#species").val())
                        $("#hBox").hide()
                        let $result = $("#result")
                        $result.show();
                        layer.close(index)
                        let target_top = $result.offset().top ;
                        $("html,body").animate({scrollTop: target_top}, 800);
                    }
                })

            }

            function disPlotBtn(){
                let row = $("#table").bootstrapTable('getSelections');
                console.log(row.length)
                if(row.length !== 0){
                    $("#plotBtn").removeAttr("disabled")
                }else{
                    $("#plotBtn").attr("disabled","disabled")
                }
            }

            function Plot() {
                let row = $("#table").bootstrapTable('getSelections');
                let nums = row.map(v => v.linesNum).join(",")
                let index = MyTable.prototype.runningIcon();

                $.post("/alfalfa/proteomics/getHeatmapPlotData?name=" + speciesName + "&selected=" + nums, (data) => {
                    heatmap(data.heatmap)
                    plotLine(data.line)

                    layer.close(index)
                    let $result = $("#hBox")
                    $result.show();
                    let target_top = $result.offset().top ;
                    $("html,body").animate({scrollTop: target_top}, 800);
                })

            }


            function heatmap(data) {
                let height = 600
                if(data.yAxis.length>30){
                    height =1000
                }

                Highcharts.chart('heatmap', {
                    credits: {
                        enabled: false
                    },
                    data: {
                        csv: data.csv,
                    },
                    exporting: {
                        sourceWidth:1400,

                        buttons: {
                            contextButton: {
                                menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
                            }
                        }
                    },
                    chart: {
                        type: 'heatmap',
                        height: height,
                         width: 1200,

                        scrollablePlotArea: {
                            minWidth: 700,
                            scrollPositionX: 1
                        }
                        //   zoomType: 'xy'
                    },
                    title: {
                        text: data.title
                    },
                    xAxis: {
                        categories: data.xAxis,
                        //  startOnTick: true,
                        labels: {
                            align: 'right',
                            rotation: -90,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        categories: data.yAxis,
                        title: "Gene",
                        endOnTick: false,
                        gridLineWidth: 0,
                        minorGridLineWidth: 0,
                        // showLastLabel:true
                    },
                    colorAxis: {
                        stops: [
                            [0.1, '#355F8D  '],
                            [0.5, '#2CA981'],
                            [1, '#F1E628']
                        ],
                        /*            min: data.min,
                                    max: data.max,*/
                    },
                    legend: {
                        title: {
                            style: {
                                fontWeight: '1',
                                color: '#555',
                                fontSize: '12px'
                            },
                            text: 'Expression(log2(TPM+1))'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + data.xAxis[this.point.x] + '</b><br/>' +
                                    data.yAxis[this.point.y] + '<br><b>Expression(log2(TPM+1)): ' + this.point.value + '</b> '
                                     ;
                        }
                    },
                    series: [{
                        borderWidth: 1,
                        borderColor: "white",
                        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
                    }]
                });
            }

            function plotLine(data) {
                Highcharts.chart('line', {
                    title: {
                        text:  data.title
                    },
                    credits: {
                        enabled: false
                    },
                    chart: {

                        width: 1200,

                    },
                    xAxis: {
                        categories: data.xAxis,
                        //  startOnTick: true,
                        labels: {
                            align: 'right',
                            rotation: -90,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Expression'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },
                    plotOptions: {
                        series: {
                            label: {
                                connectorAllowed: false
                            }

                        }
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true,

                    },
                    series: data.series,
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                }
                            }
                        }]
                    }
                });
            }
    </script>
}

